<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
	<meta name="format-detection" content="telephone=no">
	<title>中国移动收银台</title>
	<script src="/js/jquery-1.9.1.js"></script>
	<script src="/js/paycommon.js"></script>
	<link rel="stylesheet" type="text/css" href="/css/paycomm.css">
	<!--[if lt IE 9]>
    	<script src="/js/respond.js"></script>
	<![endif]-->
</head>

<style>

</style>

<body style="background: #f0f0f0;">
	<div class="pay-top">
		<div class="top-content">
			<div class="top-left">
				<img src="/img/icon_logo.png" />
				<span>中国移动收银台</span>
			</div>
			<div class="top-right"><h6>China&nbsp&nbspMobile&nbsp&nbspshenzhen</h6></div>
		</div>
	</div>
	
	<div class="pay-main">
		<div class="main-success">订单提交成功，请你尽快付款！</div>
		<div class="main-money">应付金额<span>${orderBean.payment/100.00}</span>元</div>
		<div class="main-order-id">订单号：${orderBean.orderNo}</div>
		<div class="main-order-time">订单日期：${orderBean.reqDate}</div>
		<div class="main-order-send">请您在<span>24小时</span>内完成支付，否则订单会被自动取消。</div>
		<div class="order-infos">订单详情</div>
		<div class="infos-content">
			<table cellpadding="0" cellspacing="0" class="infos-tab">
				<tr>
					<td class="left-td">商品名称:</td>
					<td><p>${orderBean.productName}</p></td>
				</tr>
				<tr>
					<td  class="left-td">详情信息:</td>
					<td><p>${orderBean.productDesc}</p></td>
				</tr>
				<!-- <tr>
					<td  class="left-td">详情信息B:</td>
					<td>广东省深圳市南上区蛇口大道国通大厦12层B区1208</td>
				</tr> -->
			</table>
		</div>
	</div>
	
	<form class="form-horizontal" name="hform" method="post" id="hform"
	      action="/cashier/submit">
	        <input type="hidden" id="ActivityCode" name="ActivityCode" value="${orderBean.activityCode}"/>
			<input type="hidden" id="ReqSys" name="ReqSys" value="${orderBean.reqSys}"/>
			<input type="hidden" id="ReqDate" name="ReqDate" value="${orderBean.reqDate}"/>
			<input type="hidden" id="ReqTransId" name="ReqTransId" value="${orderBean.reqTransId}"/>
			<input type="hidden" id="ReqDateTime" name="ReqDateTime" value="${orderBean.reqDateTime}"/>
			<input type="hidden" id="OrderNo" name="OrderNo" value="${orderBean.orderNo}"/>
			<%-- <input type="hidden" id="BuyerId" name="BuyerId" value="${orderBean.buyerId}"/> --%>
			<input type="hidden" id="IDType" name="IdType" value="${orderBean.idType}" />
			<input type="hidden" id="IDValue" name="IdValue" value="${orderBean.idValue}" />
			<input type="hidden" id="OrderMoney" name="OrderMoney" value="${orderBean.orderMoney}"/>
			<input type="hidden" id="Payment" name="Payment" value="${orderBean.payment}"/>
			<input type="hidden" id="Gift" name="Gift" value="${orderBean.gift}"/>
			<input type="hidden" id="MerActivityId" name="MerActivityId" value="${orderBean.merActivityId}"/>
			<input type="hidden" id="PaymentLimit" name="PaymentLimit" value="${orderBean.paymentLimit}"/>
			<input type="hidden" id="ProductId" name="ProductId" value="${orderBean.productId}"/>
			<input type="hidden" id="ProductName" name="ProductName" value="${orderBean.productName}"/>
			<input type="hidden" id="ProductDesc" name="ProductDesc" value="${orderBean.productDesc}"/>
			<input type="hidden" id="ProductUrl" name="ProductUrl" value="${orderBean.productUrl}"/>
			<input type="hidden" id="NotifyUrl" name="NotifyUrl" value="${orderBean.notifyUrl}"/>
			<input type="hidden" id="ReturnUrl" name="ReturnUrl" value="${orderBean.returnUrl}"/>
			<input type="hidden" id="ClientIp" name="ClientIp" value="${orderBean.clientIp}"/>
			<input type="hidden" id="CustomParam" name="CustomParam" value="${orderBean.customParam}"/>
			<input type="hidden" id="CerID" name="CerID" value="${orderBean.cerID}"/>
			<input type="hidden" id="SignValue" name="SignValue" value="${orderBean.signValue}"/>
		    <input type="hidden" id="WeixinAppId" name="WeixinAppId" value="${orderBean.weixinAppId}">
		    <input type="hidden" id="WeixinOpenId" name="WeixinOpenId" value="${orderBean.weixinOpenId}">
            <input type="hidden" id="PaymentType" name="PaymentType"  value="${orderBean.paymentType}">
            <input type="hidden" id="DefaultBank" name="DefaultBank" value="">
	</form>
	
	
	<div class="pay-type">
		<div class="check-type">
			<div class="type-title">请选择支付方式&nbsp&nbsp&nbsp&nbsp<span id="noselect" class="main-money"></span></div>
			
			<div class="type-list">
				<table cellpadding="0" cellspacing="0" class="type-list-tab">
					<tr>
					 <c:forEach var="paytype" items="${orderBean.payTypeList}">
					    <c:choose>
					      <c:when test="${fn:contains(paytype, 'WEIXIN')}">
							<td id="${paytype}" onclick="selectPayType('${paytype}')">
								<div>
									<img src="/img/icon_weixing.png ">
									<img src="/img/icon_Selected.png" class="check-pay-img">
									微信支付
								</div>
							</td>
						  </c:when>
						  <c:when test="${fn:contains(paytype, 'ALI') && !fn:contains(paytype, 'BANK')}">
							<td id="${paytype}" onclick="selectPayType('${paytype}')">
								<div>
									<img src="/img/icon_zhifu.png">
									<img src="/img/icon_Selected.png" class="check-pay-img">
									支付宝支付
								</div>
							</td>
						  </c:when>
						  <c:when test="${fn:contains(paytype, 'UNIONPAY')}">
							<td id="${paytype}" onclick="selectPayType('${paytype}')">
								<div>
									<img src="/img/icon_yingnian.png">
									<img src="/img/icon_Selected.png" class="check-pay-img">
									银联支付
								</div>
							</td>
						  </c:when>
						</c:choose>
					 </c:forEach>
					</tr>
				</table>
				<ul>
				<c:forEach var="paytype" items="${orderBean.payTypeList}">
					<c:choose>
					<c:when test="${fn:contains(paytype, 'WEIXIN')}">
					   <li id="${paytype}" onclick="selectPayType('${paytype}')">
						   <img src="/img/icon_weixing.png">
						   <img src="/img/icon_Selected.png" class="check-pay-img">
						        微信支付
					   </li>
					</c:when>
					<c:when test="${fn:contains(paytype, 'UNIONPAY')}">
					   <li id="${paytype}" onclick="selectPayType('${paytype}')">
						   <img src="/img/icon_yingnian.png">
						   <img src="/img/icon_Selected.png" class="check-pay-img">
						        银联支付
					   </li>
					</c:when>
					<c:when test="${fn:contains(paytype, 'ALI') && !fn:contains(paytype, 'BANK')}">
					   <li id="${paytype}" onclick="selectPayType('${paytype}')">
						   <img src="/img/icon_zhifu.png">
						   <img src="/img/icon_Selected.png" class="check-pay-img">
						         支付宝支付
					   </li>
					</c:when>
					</c:choose>
				</c:forEach>
				</ul>
			</div>
			
			<div class="bank-list">
				<ul id="banklist" >
					<li id="ICBCB2C" ><div class="bank6"></div></li><!-- name="gongshang" -->
					<li id="CCB" ><div class="bank13"></div></li><!--name="jianshe"  -->
					<li id="COMM-DEBIT" ><div class="bank15"></div></li><!--name="jiaotong"  -->
					<li class="more-bank">更多银行</li>
					<li id="GDB" ><div class="bank8"></div></li><!--name="guangfa"  -->
					<li id="CMBC" ><div class="bank17"></div></li><!--name="mingsheng"  -->
					<li id="ABC" ><div class="bank20"></div></li><!-- name="nongye" -->
					<li id="SPA-DEBIT" ><div class="bank21"></div></li><!--name="pingan"  -->
					<li id="SPDB" ><div class="bank22"></div></li><!--name="pufa"  -->
					<li id="CMB" ><div class="bank29"></div></li><!--name="zhanshang"  -->
					<li id="BOCB2C" ><div class="bank31"></div></li><!-- name="zhongguo" -->
					<li id="POSTGC" ><div class="bank32"></div></li><!--name="youzheng"  -->
					<li id="CITIC-DEBIT" ><div class="bank33"></div></li><!--name="zhongxin"  -->
				</ul>
			</div>
		</div>
		<div class="go-pay">
			<button onClick="checkAndSubmit('${authUrl}')" id="btgopay">去支付</button>
		</div>
	</div>
	<div class="pay-bottom">
		<div>Copyright©2004-2016 中国移动 版权所有</div>
	</div>
	
	
	<script>

		$(document).ready(function() {
			    init("${orderBean.clientType}","${orderBean.payTypeList}");
			});
		
		var i =0 ;
		$(".order-infos").on("click",function(){
			if(i == 0){
				$(this).addClass("bg-up");
				$(".infos-content").show();
				i = 1;
			}else{
				
				$(this).removeClass("bg-up");
				$(".infos-content").hide();
				i = 0;
			}
		})
		
		$(".more-bank").nextAll().hide();
		
		$(".more-bank").on("click",function(){
			$(this).nextAll().show();
			$(this).remove();
		})
		
		//pc，ipad选中效果
		var _div = $(".type-list-tab td div");
		var _bank = $(".bank-list li");
		
		_div.on("click",function(){
			_bank.find(".check-pay-img").remove();
			_bank.removeClass("check-pay-bg");
			_div.find(".check-pay-img").hide();
			_div.removeClass("check-pay-bg");
			$(this).find(".check-pay-img").show();
			$(this).addClass("check-pay-bg");
		})
		
		_bank.on("click",function(){
			_div.find(".check-pay-img").hide();
			_div.removeClass("check-pay-bg");
			_bank.find(".check-pay-img").remove();
			_bank.removeClass("check-pay-bg");
			$(this).addClass("check-pay-bg");
			$(this).append('<img src="/img/icon_Selected.png" class="check-pay-img show-img">');
		})
		
		
		//手机选中效果	
		var _li = $(".type-list ul li");
		_li.on("click",function(){
			_li.find(".check-pay-img").hide();
			_li.removeClass("check-pay-bg");
			$(this).find(".check-pay-img").show();
			$(this).addClass("check-pay-bg");
		})
		
	</script>
</body>
</html>
